<template>
  <div
    ref="chartPie"
    style="width: 100%; height: 60vw"
    @click="toPie()"
  >
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'chartPie',
    components: {},
    props: {
        data: {
            type: Array,
            default() {
                return [];
            }
        }
    },

    created() {
        this.option = {
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    type: 'pie',
                    radius: '50%',
                    data: this.data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffSetX: 0,
                            shadowColor: 'rgba(0,0,0,0.5)'
                        }
                    },
                    itemStyle: {
                    }
                }
            ]
        };
    },
    mounted() {
        const dom = this.$refs.chartPie;
        const pieChart = echarts.init(dom);
        pieChart.setOption(this.option);
    },
    methods: {
      toPie(){
        this.$emit('toPie')
      }
    }
};
</script>

<style scoped>
</style>

